<template>
	<view>
		<view class="warn-info-transverse">
			<view class="warn-right">
				<image class="warn-icon" src="../static/car_warn_icon.png" />
				<view class="warn-text">
					您在设备使用过程中遇到任何问题都可以联系我们处理：400-999-1778
				</view>
			</view>
		</view>
		<view class="listView">
			<scroll-view :refresher-enabled='false' scroll-y style="height:  calc(100% - 100px);width: 100%;">
				<view class="carInfoView">
					<view class="info-transverse">
						<view class="text4">车载终端信息</view>
					</view>
					<view class="info-transverse">
						<view class="text1">车架号</view>
						<view class="text2" v-if="vin==''">-</view>
						<view class="text2" v-else>{{vin}}</view>
					</view>
					<view class="info-transverse">
						<view class="text1">SN 号</view>
						<view class="text2" v-if="deviceId==''">-</view>
						<view class="text2" v-else>{{deviceId}}</view>
					</view>
					<view class="info-transverse">
						<view class="text4">解绑原因</view>
					</view>
					<block v-for="(item, index) in dataList" :key="index">
						<view class="info-transverse" @click="unbindReasonClick(index)">
							<view class="text1">{{item.reason}}</view>
							<image class="chooseImg" v-if="item.isChoice==true"
								src="@appstatic/car/car_unbind_choose.png" />
							<image class="chooseImg" v-else src="@appstatic/car/car_unbind_unchoose.png" />
							</image>
						</view>
					</block>

				</view>


			</scroll-view>
			<view class="footer">
				<view class="text-3" @click="unbindPop">确定解绑</view>
				<view class="text-5" @click="keep">保持绑定</view>
			</view>
		</view>
		<clxDialog :isShow='unbindPopShow' @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel' :title="title">
		</clxDialog>
	</view>
</template>

<script>
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	import clxDialog from "@components/clx-dialog/clx-dialog";
	export default {
		data() {
			return {
				vin: '',
				deviceId: '',
				unbindReason: '',
				dataList: [{
						reason: '绑定了错误的终端',
						isChoice: 'false'
					},
					{
						reason: '终端数据不再更新',
						isChoice: 'false'
					},
					{
						reason: '终端已坏，解绑后绑定新设备',
						isChoice: 'false'
					},
					{
						reason: '不想使用了',
						isChoice: 'false'
					}
				],
				unbindPopShow: false,
				title: '您确认要解绑该设备吗？',
			}
		},
		components: {
			clxDialog
		},
		onLoad: function(options) {
			this.vin = options.vin
			this.deviceId = options.deviceId



		},
		methods: {
			//选择解绑原因
			unbindReasonClick: function(index) {
				for (var i = 0; i < this.dataList.length; i++) {
					if (index == i) {
						this.dataList[i].isChoice = true
						this.unbindReason = this.dataList[i].reason
					} else {
						this.dataList[i].isChoice = false
					}
				}

			},
			//继续保持
			keep: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			//解绑提示弹窗
			unbindPop: function() {
				if (this.unbindReason == '') {
					uni.showToast({
						title: "请选择解绑原因",
						duration: 3000,
						icon: 'none'
					})
					return
				}
				this.unbindPopShow = true
			},
			//确定删除
			dialogConfirm(e) {
				this.unbindPopShow = false
				this.unBindDevice()
			},
			//取消删除
			dialogCancel() {
				this.unbindPopShow = false
			},
			//终端解绑（售后更换场景）
			unBindDevice() {

				debugger
				var that = this;

				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_UNBINDDEVICE;
				var params = {
					vin: that.vin,
					deviceId: that.deviceId,
					operationReason: that.unbindReason
				};
				console.log(params, 'params')
				network.post(uri, params, 'form', null, true).then(res => {
					if (res.code == 200) {
						var prePage = this.$util.prePage()
						prePage.getBindSuccessInfo();
						uni.showToast({
							title: "解绑成功",
							duration: 3000,
							icon: 'none',
							success: () => {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}
						})


					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			}

		}
	}
</script>

<style>
	@import "./unbindCar.css";
</style>
